<template>
  <div class="grids">
    <a-row :gutter="8">
      <a-col :span="8">
        <Unit
          :value="data.ytdTarget"
          label="YTD target"
          :status="getStatus(data.ytdTarget, data.ytdActual)"
          />
        <Unit
          :value="data.ytdActual"
          label="YTD actual"
          :status="getStatus(data.ytdTarget, data.ytdActual)"/>
      </a-col>
      <a-col :span="8">
        <div class="custom" :class="{up: up, down: down}">
          <Unit
            :value="data.currentTarget"
            label="Current target"
            :status="getStatus(data.currentTarget, data.currentActual)"
            transparent/>
          <Unit
            :value="data.currentActual"
            label="Current actual"
            :status="getStatus(data.currentTarget, data.currentActual)"
            transparent/>
        </div>
      </a-col>
      <a-col :span="8">
        <Unit
          :value="data.yeTarget"
          label="YE target"
          :status="getStatus(data.yeTarget, data.yeFc)"/>
        <Unit
          :value="data.yeFc"
          label="YE FC"
          :status="getStatus(data.yeTarget, data.yeFc)"/>
      </a-col>
    </a-row>
  </div>
</template>

<script>
import Unit from '@/components/Unit.vue'
export default {
  components: {
    Unit
  },
  props: {
    data: Object
  },
  computed: {
    up () {
      return this.data.currentTarget - this.data.currentActual > 0
    },
    down () {
      return this.data.currentTarget - this.data.currentActual < 0
    }
  },
  methods: {
    getStatus (a, b) {
      if (a === b) return ''
      if (a > b) {
        return 'up'
      } else {
        return 'down'
      }
    }
  }
}
</script>

<style scoped lang="scss">
.grids {
  margin-top: 16px;
}
.custom {
  &.up {
    background-color: lighten(#E5353A, 10%);
  }
  &.down {
    background-color: lighten(#50D372, 10%);
  }
}
</style>
